<!-- 弹框表单 -->
<template>
  <el-dialog
    v-if="useModalForm"
    :visible.sync="dialogVisible"
    v-bind="$attrs"
    :close-on-click-modal="closeOnClickModal"
  >
    <m-form
      ref="mForm"
      :dialog-visible.sync="dialogVisible"
      v-bind="formAttrs"
      :options="options"
      :btn-text="btnText"
      :is-button="isButton"
      :all-btn="allBtn"
      :form-type="formType"
      :visible="dialogVisible"
      @get-model="(model)=>$emit('get-model', model)"
      @save="(formData) => $emit('save', formData)"
    />
  </el-dialog>
</template>

<script>
export default {
  name: "ModalForm",
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    // 是否可以通过点击 modal 关闭 Dialog
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    formType: {
      type: String,
      default: "add"
    },
    // 表单 -----------start---------------------
    // 表单数据
    options: {
      type: Array,
      required: true,
      default: () => []
    },
    // 表单属性
    formAttrs: {
      type: Object,
      default: () => { }
    },
    // 表单按钮显示文字
    btnText: {
      type: Object,
      default: () => {
        return {
          left: "保存",
          right: "取消"
        };
      }
    },
    // 是否显示按钮
    isButton: {
      type: Boolean,
      default: false
    },
    // 是否使用全局按钮组件
    allBtn: {
      type: Object,
      default: () => {
        return {
          show: false,
          btnList: [],
          size: "mini"
        };
      }
    }

    // 表单 -----------end---------------------
  },
  data() {
    return {
      dialogVisible: false,
      // 是否需要使用组件 (控制引入组件 初始化时不需要加载该组件)
      useModalForm: false
    };
  },
  // 同步父组件关闭弹框
  watch: {
    dialogVisible(val) {
      this.$emit("update:visible", val);
      if (!this.useModalForm && val) {
        this.useModalForm = val;
      }
    },
    visible(val) {
      this.dialogVisible = val;
    }
  },
  created() {
    console.log(this.$attrs);
  }
};
</script>

<style scoped lang="scss">
</style>
